<script setup lang="ts">
import { ref,watch } from 'vue'
const props = defineProps<{ msg: string }>()
let value = ref()
const fileName = ref('这是父组件定义的默认的FileName')
// const value = computed({
//   get() {
//     return props.msg
//   },
//   set() {

//   }
// })

watch(() => props.msg, (val) => {
  console.log(1111111)
  value.value = val
},{ immediate: true })
// const count = ref(0)
const emits = defineEmits(['update:msg'])
const changeMsg = () => {
  fileName.value += '1'
  //修改父组件传过来的值
  value.value+='123'
  emits('update:msg', value.value)
}
function changeFileName(value) {
  fileName.value = value
}
</script>

<template>
  <!-- <div>我是HelloWorld组件</div> -->
  <div>
    子组件选择的文件名称是:{{ fileName }}
  <!-- <FileComponent v-model:modelValue="fileName"></FileComponent> 等同于下面的写法 -->
  <FileComponent :modelValue="fileName" @update:modelValue="changeFileName"></FileComponent>
  </div>
  
  <h1>{{ value }}</h1>
  <button v-on:click.stop="changeMsg">修改传过来的值</button>
  <img v-errimage="'https://t8.baidu.com/it/u=813524873,160026530&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=09803C7233F073847D7DB14D0200C0E2&sec=1703091600&t=d9ac933b569a2c1461d39995713fcc77'" alt="">
  <!-- <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p> -->
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
